<template>
  <div class="table-header">
    <div
      v-for="(names, index) in formattedNames"
      :key="index"
      class="header-column"
      :style="{ width: columnWidth + 'px', minWidth: columnWidth + 'px' }" 
      :class="{ 'last-column': index == formattedNames.length - 1 }"
    >
      <!-- 每个栏目具体展示的内容 -->
      <div class="header-content" :class="{ 's-column': index % 2 == 0 }">
        <span> {{ names[0] }}</span> 
        <span v-if="names[1]"> / </span>
        <span>{{ names[1] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showNames: {
      type: Array,
      required: true,
    },
    showStyle: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      screenWidth: window.innerWidth, // 初始化屏幕宽度
    };
  },
  computed: {
    columnCount() {
      return this.showStyle.length; // 总列数
    },
    columnWidth() {
      // 列宽不能小于屏幕宽度的四分之一
      const minColumnWidth = this.screenWidth / 4; // 设置最小宽度为 100px，防止过小
      return Math.max(this.screenWidth / this.columnCount, minColumnWidth);
    },
    formattedNames() {
      const result = [];
      let currentIndex = 0;

      // 遍历 showStyle，生成格式化后的列数据
      for (let i = 0; i < this.showStyle.length; i++) {
        const style = this.showStyle[i];
        const names = [];

        // 根据 showStyle 配置，填充列数据
        for (let j = 0; j < style; j++) {
          if (currentIndex < this.showNames.length) {
            names.push(this.showNames[currentIndex]);
            currentIndex++;
          } else {
            names.push(''); // 如果元素不足，添加空字符串
          }
        }

        result.push(names);
      }

      return result;
    },
  },
  mounted() {
    // 监听窗口大小变化，动态更新屏幕宽度
    window.addEventListener('resize', this.updateScreenWidth);
    this.updateScreenWidth(); // 初始化时也调用一次
  },
  beforeDestroy() {
    // 组件销毁时移除监听器
    window.removeEventListener('resize', this.updateScreenWidth);
  },
  methods: {
    updateScreenWidth() {
      this.screenWidth = window.innerWidth; // 更新为当前屏幕宽度
    },
  },
};
</script>

<style lang="less" scoped>
/* stylelint-disable */

.table-header {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto; /* 保留横向滚动功能 */
  background-color: lightcyan;
}

.table-header::-webkit-scrollbar {
  display: none; /* 隐藏滚动条（适用于 Chrome、Safari 和 Edge） */
}

.header-column {
  flex-shrink: 0; /* 防止列宽被压缩 */
  position: relative; /* 默认相对定位 */
}

.header-column:first-child {
  position: sticky; /* 设置第一列为悬浮 */
  left: 0; /* 固定在左侧 */
  z-index: 1; /* 确保悬浮列在其他列之上 */
  background-color: lightcyan; /* 设置背景色，避免内容重叠 */
}

.header-content {
  min-height: 40px;
}

.header-column.last-column .header-content {
  text-align: right; /* 最后一列文本右对齐 */
}

.s-column {
  background-color: green;
}
</style>